import React, { memo, useEffect, useState } from 'react'
import { RightWrapper } from './style'
import IconGlobal from '@/assets/svg/icon-global'
import IconMenu from '@/assets/svg/icon-menu'
import IconAvatar from '@/assets/svg/icon-avatar'

const HeaderRight = memo(() => {
  const [showPanel, setShowPanel] = useState(false)

  useEffect(() => {
    function windowClick () {
      setShowPanel(false)
    }
    window.addEventListener('click', windowClick)
    return () => {
      window.removeEventListener('click', windowClick)
    }
  }, [])

  function clickProfile (event) {
    event.stopPropagation()
    setShowPanel(true)
  }

  return (
    <RightWrapper>
      <div className='links'>
        <span className='links-item'>登录</span>
        <span className='links-item'>注册</span>
        <span className='links-item'>
          <IconGlobal />
        </span>
      </div>
      <div className='profile' onClick={(e) => clickProfile(e)}>
        <IconMenu />
        <IconAvatar />
        {
          showPanel && (
            <div className='panel'>
              <div className='panel-top'>
                <div className='panel-line'>注册</div>
                <div className='panel-line'>登录</div>
              </div>
              <div className='panel-bottom'>
                <div className='panel-line'>出租房源</div>
                <div className='panel-line'>开展体验</div>
                <div className='panel-line'>帮助</div>
              </div>
            </div>
          )
        }
      </div>
    </RightWrapper>
  )
})

export default HeaderRight